﻿<template>
  <div class="bg_get_img_container">
    <div class="bg_get_img clearfix">
      <input type="text" class="card_input_title" placeholder="请输入卡牌标题" ref="title">
    </div>
    <div class="get_img_box clearfix">
      <div class="get_img_box_inner_box" v-on:click="get_img_f">
        <img :src="show_b_img_data" v-show="!!show_b_img_data" class="real_img" >
        <img src="../../../static/img/white_add_img.jpg" alt="" v-show="!show_b_img_data">
      </div>
      <ul class="get_img_box_bottom">
          <li>
            <img src="../../../static/img/tuwen.jpg" alt="">
            <p>
              添加图文
            </p>
          </li>
          <li>
          <img src="../../../static/img/d_1.png" alt="">
          <p>
            官方素材
          </p>
          </li>
          <li>
          <img src="../../../static/img/smile.jpg" alt="">
          <p>
            参考
          </p>
          </li>
      </ul>
    </div>
    <div class="next_box clearfix">
      <div class="next_btn_base" v-on:click="next_voice">
        添加语音
      </div>
      <div class="next_btn_base" v-on:click="next_step">
        下一步
      </div>
    </div>
    <input type="file" ref="file" v-show="false">
  </div>

</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import common from "../../common/common.js";
  const qs = require('qs');
export default {
  name: 'bg_get_img',
  data () {
    return {
      show_b_img_data:false
    }
  },
  mounted: function () {
    common.get_img(this);
  },
  methods: {
    next_step:function () {
        let title_v = this.$refs.title.value;
        let img = !!this.show_b_img_data ? this.show_b_img_data : "";
        let title = !!this.$refs.title.value ? title_v : "";
        this.$store.commit("set_B_M",{
                                        img:img,
                                        title:title
                                      });
        this.$store.dispatch("thom_redirect",
          { name: "/beginner_m_wrapper/bg_get_msg_m", router: this.$router });
    },
    next_voice:function(){
      this.$store.dispatch("thom_redirect",
        { name: "/beginner_m_wrapper/bg_get_voice", router: this.$router });
    },
    get_img_f:function () {
      this.$refs.file.click();
    }
  },
  components: {

  }
}
</script>
<style scoped lang="scss">
 @import "../../../static/sass/thom_c_size.scss";
 @import "../sass/bg_get_img.scss";

</style>
